<template>
    <div @click="pickering=!pickering">
        <mt-cell :title="title" :value="value">
            <mt-picker v-if="pickering" :slots="entries"
                       @change="onChange" :visible-item-count="3"></mt-picker>
            <span v-else>{{value}}</span>
        </mt-cell>
    </div>
</template>
<script>

    export default {
        props: [
            'title',
            'dictionary',
            'value'
        ],
        data(){
            return {
                label:'',
                entries: [{
                    flex: 1,
                    values: this.$store.state.dictionary[this.dictionary],
                    className: 'slot1',
                    defaultIndex: 0
                }],
                pickering: false
            }
        },
        computed: {},
        methods: {
            onChange(picker, values){
                this.value = values[0];
                this.$emit('input', this.value);
            }
        },
        mounted(){
            this.label = this.$store.state.dictionary[this.dictionary][0];
        }
    };
</script>

